<script setup name="form">
import { ref, reactive, onMounted, computed } from "vue";
import {
  ElAmap,
  ElAmapControlGeolocation,
  ElAmapMarker,
  useGeolocation
} from "@vuemap/vue-amap";
import { showSuccessToast } from "vant";

import { getShopCategory, submitForm } from "@/api";
const zoom = ref(18);
const center = ref([120.355173, 36.082982]);
const init = () => {
  useGeolocation({
    enableHighAccuracy: true
  }).then(res => {
    const { getCurrentPosition } = res;
    getCurrentPosition().then(currentPosition => {
      center.value = currentPosition.position.toArray();
      console.log("currentPosition: ", currentPosition);
    });
  });
};

const getLocation = e => {
  center.value = e.position.toArray();
  console.log("getLocation: ", e);
};

// 下拉菜单
const showPicker = ref(false);
const columns = ref([]);

const onConfirm = ({ selectedOptions }) => {
  form.classify = selectedOptions[0]?.text;
  showPicker.value = false;
};

// 表单数据
const form = reactive({
  center: "",
  storeName: "",
  classify: "",
  address: "",
  remark: ""
});

form.center = computed(() => {
  if (center.value) {
    return center.value.join(",");
  } else {
    return "";
  }
});

// 表单验证
const formRules = ref({
  center: [{ required: true, message: "请填写经纬度" }],
  storeName: [{ required: true, message: "请填写商铺名称" }],
  classify: [{ required: true, message: "请填写商铺类型" }],
  address: [{ required: true, message: "请填写商铺地址" }],
  createBy: [{ required: true, message: "请填写填写人" }]
});

const onSubmit = () => {
  let data = {
    ...form,
    longitude: center.value[0].toString(),
    latitude: center.value[1].toString()
  };
  submitForm(data).then(() => {
    showSuccessToast("商铺打点成功");
  });
};

const onClear = () => {
  form.storeName = "";
  form.classify = "";
  form.address = "";
  form.remark = "";
};

onMounted(() => {
  getShopCategory().then(res => {
    columns.value = res.map(item => {
      return {
        text: item.dictLabel,
        value: item.dictValue
      };
    });
  });
});
</script>

<template>
  <div class="form-content">
    <div class="map-page-container">
      <el-amap :center="center" :zoom="zoom" @init="init">
        <ElAmapMarker :position="center" />
        <el-amap-control-geolocation
          :offset="[20, 20]"
          :show-marker="false"
          :show-circle="false"
          @complete="getLocation"
        />
      </el-amap>
    </div>
    <van-form @submit="onSubmit" style="margin-top: 16px">
      <van-cell-group inset>
        <van-field
          v-model="form.center"
          label="经纬度"
          placeholder="点击地图定位获取经纬度"
          readonly
          :rules="formRules.center"
        />
        <van-field
          v-model="form.storeName"
          label="商铺名称"
          :rules="formRules.storeName"
        />
        <van-field
          v-model="form.classify"
          is-link
          readonly
          name="picker"
          label="商铺类型"
          placeholder="点击选择商铺类型"
          @click="showPicker = true"
          :rules="formRules.classify"
        />
        <van-field
          v-model="form.address"
          name="picker"
          label="商铺地址"
          :rules="formRules.address"
        />
        <van-field
          v-model="form.createBy"
          label="填写人"
          :rules="formRules.createBy"
        />
        <van-field
          v-model="form.remark"
          label="备注"
          :rules="formRules.remark"
        />
      </van-cell-group>
      <div style="margin: 16px 40px">
        <van-row>
          <van-col span="10">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </van-col>
          <van-col span="10" offset="4">
            <van-button round block type="warning" @click="onClear">
              清空
            </van-button>
          </van-col>
        </van-row>
      </div>
    </van-form>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<style lang="less" scoped>
.map-page-container {
  width: 100%;
  height: 350px;
}
</style>
